<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>丑团外卖</title>
    <link rel="shortcut icon" href="./assets/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="./css/common.css" />
    <link rel="stylesheet" href="./css/container.css" />
    <link rel="stylesheet" href="./css/footer.css" />
    <link rel="stylesheet" href="./css/add-to-car.css" />
  </head>
  <body>
	  <!-- http://192.168.0.14:8848/vue-edu/teacher/003-%E7%9F%A5%E8%AF%86%E5%9B%9E%E9%A1%BE-%E8%B4%AD%E7%89%A9%E8%BD%A6%E9%A1%B5%E9%9D%A2%E6%95%88%E6%9E%9C/index.html -->
    <div class="container" id="html">
      <div class="menu">
        <div class="menu-item active"><span>推荐</span></div>
        <div class="menu-item"><span>热销</span></div>
        <div class="menu-item"><span>折扣</span></div>
        <div class="menu-item"><span>夏日冰咖必喝榜</span></div>
        <div class="menu-item"><span>进店必喝</span></div>
        <div class="menu-item"><span>只喝美式</span></div>
        <div class="menu-item"><span>酷爽特调水果冰萃</span></div>
        <div class="menu-item"><span>经典奶咖</span></div>
        <div class="menu-item"><span>创意奶咖</span></div>
        <div class="menu-item"><span>瑞纳冰季</span></div>
        <div class="menu-item"><span>不喝咖啡</span></div>
        <div class="menu-item"><span>轻食甜品</span></div>
        <div class="menu-item"><span>热卖套餐</span></div>
      </div>
      <div class="goods-list">
        <div class="goods-item active" v-for="val,index in goods">
          <img :src=val.pic alt="" class="goods-pic" />
          <div class="goods-info">
            <h2 class="goods-title">{{val.title}}</h2>
            <p class="goods-desc">
             {{val.desc}}
            </p>
            <p class="goods-sell">
              <span>月售 {{val.sellNumber}}</span>
              <span>好评率{{val.favorRate}}%</span>
            </p>
            <div class="goods-confirm">
              <p class="goods-price">
                <span class="goods-price-unit">￥</span>
                <span>{{val.price}}</span>
              </p>
              <div class="goods-btns">
                <i class="iconfont i-jianhao" @click="decrease(index)"></i>
                <span>{{val.chooseNum}}</span>
                <i class="iconfont i-jiajianzujianjiahao" @click="increase(index)"></i>
              </div>
            </div>
          </div>
        </div>
    </div>
    <div class="footer">
      <div class="footer-car-container">
        <div class="footer-car active">
          <i class="iconfont i-gouwuchefill"></i>
          <span class="footer-car-badge">{{allChooseNum}}</span>
        </div>
        <div class="footer-car-price">
          <span class="footer-car-unit">￥</span>
          <span class="footer-car-total">{{allPrice}}</span>
        </div>
        <div class="footer-car-tip">配送费￥{{deliveryPrice}}</div>
      </div>
      <div class="footer-pay">
        <a href="">去结算</a>
        <span>还差￥{{deliveryThreshold}}元起送</span>
      </div>
    </div>
	     <div class="add-to-car" v-if="addIconInfo.show">
	     	 <i class="iconfont i-jiajianzujianjiahao"></i>
	     </div>
	</div>
  </body>
</html>
<script src="../vue@3.2.23.js"></script>
<script src="./js/data.js"></script>
<script src="./js/index.js"></script>

